<template>
	<div class="refisterContainer">
		<div class="refisterHeaderContainer">
			<login-header :is-login-register-btn = "isLoginRegisterBtn"></login-header>
		</div>
		<div class="refisterForm">
			<div class="refisterFormContainer">
				<h2 class="text_align_center margin_bottom_10" style="color: rgba(0, 0, 0, 0.5);">注&nbsp;&nbsp;&nbsp;册</h2>
				<el-form :model="ruleForm" status-icon :rules="rules" validate-on-rule-change ref="ruleForm" @keyup.enter="submitForm('ruleForm')" class="demo-ruleForm">
					<div>
						<el-form-item prop="userName" style="margin-bottom: 20px">
							<el-tooltip class="item" effect="dark" placement="left-start">
								<div slot="content">用户名为：<br/>1、数字、大小写字母、汉字、下划线任意组成<br/>2、长度为3--10位</div>
								<el-input type="text" v-model="ruleForm.userName" auto-complete="off" placeholder="请输入用户名" class="userName"></el-input>
							</el-tooltip>
						</el-form-item>
						<el-form-item prop="userPassword">
							<el-tooltip class="item" effect="dark" placement="left">
								<div slot="content">密码为：<br/>1、数字、大小写字母、符号至少两种组合的字符<br/>2、长度为8--15位</div>
								<el-input type="password" v-model="ruleForm.userPassword" auto-complete="off" placeholder="请输入密码" class="userPassword"></el-input>
							</el-tooltip>
						</el-form-item>
						<el-form-item prop="userPasswordVerify">
							<el-input type="password" v-model="ruleForm.userPasswordVerify" auto-complete="off" placeholder="请再次输入密码" class="userPasswordVerify"></el-input>
						</el-form-item>
					</div>
					<div style="margin-top: 30px;" class="text_align_center">
						<el-form-item>
							<el-button type="primary" @click="submitForm('ruleForm')" class="width_100 font_size_15">注&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;册</el-button>
						</el-form-item>
					</div>
				</el-form>
				<div class="operationBtnContainer">
					<el-row :gutter="20">
						<el-col :span="24" class="text_align_right font_size_14">
							已有账号？
							<router-link style="color: #409EFF;" to="/Login">去登录</router-link>
						</el-col>
					</el-row>
				</div>
			</div>
		</div>
	</div>
</template>

<style>
	.refisterForm {
		width: 100%;
		height: 600px;
		background-image: url(../../static/images/back_2.jpg);
		background-repeat: no-repeat;
		background-size: cover;
		margin-top: 20px;
		position: relative;
	}
	
	.refisterFormContainer {
		width: 350px;
		height: 350px;
		padding: 15px 35px;
		position: absolute;
		top: 50%;
		right: 300px;
		margin-top: -150px;
		background-color: rgba(238, 238, 238, 0.7);
		border-radius: 8px;
	}
	
	.userName input,
	.userPassword input,
	.userPasswordVerify input {
		border-radius: 20px !important;
	}
</style>

<script type="text/ecmascript-6">
	import LoginHeader from "@/components/LoginHeader.vue"
	import axios from "axios"
	export default {
		data() {
			var validateUserName = (rule, value, callback) => {
				var regex = /^([a-zA-Z0-9_\u4e00-\u9fa5]){3,10}$/;
				if(value === '') {
					callback(new Error('请输入用户名'));
				} else if(!regex.test(value)) {
					callback(new Error('用户名格式不对'));
				} else {
					callback();
				}
			};
			var validateUserPassword = (rule, value, callback) => {
				var regex = /^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?![,\.#%'\+\*\-:;^_`!@$]+$)[,\.#%'\+\*\-:;^_`!@$0-9A-Za-z]{8,15}$/;
				if(value === '') {
					callback(new Error('请输入密码'));
				} else if(!regex.test(value)) {
					callback(new Error('输入密码格式不对'));
				} else {
					if(this.ruleForm.userPasswordVerify !== '') {
						this.$refs.ruleForm.validateField('userPasswordVerify');
					}
					callback();
				}
			};
			var validatePass2 = (rule, value, callback) => {
				if(value === '') {
					callback(new Error('请再次输入密码'));
				} else if(value !== this.ruleForm.userPassword) {
					callback(new Error('两次输入密码不一致!'));
				} else {
					callback();
				}
			};
			return {
				ruleForm: {
					userPassword: "",
					userName: "",
					userPasswordVerify: ""
				},
				rules: {
					userName: [{
						validator: validateUserName,
						trigger: 'blur'
					}],
					userPassword: [{
						validator: validateUserPassword,
						trigger: 'blur'
					}],
					userPasswordVerify: [{
						validator: validatePass2,
						trigger: 'blur'
					}],
				},
				//登录导航显示 登录 注册按钮
				isLoginRegisterBtn : false
			};
		},
		components: {
			//login header
			LoginHeader
		},
		methods: {
			//注册用户
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if(valid) {
						console.log(this.ruleForm.userName + ":" + this.ruleForm.userPassword + ":" + this.ruleForm.userPasswordVerify);
						axios.post("/users/registerUser", {
							userName: this.ruleForm.userName,
							userPassword: this.$md5(this.ruleForm.userPassword),
							userPasswordVerify: this.$md5(this.ruleForm.userPasswordVerify)
						}).then((response) => {
							var data = response.data;
							//注册成功
							if(data.status == 0) {
								this.$alert(data.result, "", {
									confirmButtonText: "确定",
									showClose: false,
									type: "success",
									center: true,
									callback: action => {
										this.$router.push({
											path: "/Login"
										});
									}
								});
							}
							//用户名重复
							if(data.status == 1002) {
								this.$alert(data.result, "", {
									confirmButtonText: "确定",
									showClose: false,
									type: "warning",
									center: true,
									callback: action => {
										this.ruleForm.userPassword = "";
										this.ruleForm.userPasswordVerify = "";
										//重置表单验证
										this.$refs[formName].resetFields();
									}
								});
							}
						});
					} else {
						return false;
					}
				});
			}
		}
	}
</script>